/*
 * @Author: duchengdong
 * @Date: 2023-07-14 19:40:01
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-13 23:29:32
 * @Description:
 */
import {View, Text, TouchableOpacity, Image, Alert,Pressable} from 'react-native'
import React from 'react'
import {Stack, useRouter} from 'expo-router'
import {zhSpacingColBase, zhSpacingColSm, zhSpacingRowBase, zhThemeColor} from '../../global'
import AsyncStorage from '@react-native-async-storage/async-storage'

export default function Layout() {
	//获得路由器对象，用于页面跳转
	let router = useRouter()
  const goBack = ()=>{
    router.back()
  }
	return (
		//页签式导航，为页签页面提供“顶部导航条”和“底部页签条”
		<Stack
			screenOptions={{
				/************下面的选项是Stack和Tabs导航共有的***********/
				headerStyle: {backgroundColor: '#fff'}, //标题栏背景颜色
				headerTintColor: '#000', //标题文本字体颜色
				headerTitleAlign: 'center', //标题文本居中对齐
				headerTitleStyle: {fontSize: 16}, //标题文本大小
			}}
		>
			<Stack.Screen
				name="home"
				options={{
					/************下面的选项是Stack和Tabs导航共有的***********/
					title: '智慧眼镜', //标题文字
					//headerLeft: ()=>(<></>),
					//headerTitle: ()=>(<></>),
					headerRight: () => (
						<TouchableOpacity
							activeOpacity={0.6}
							onPress={() =>
								Alert.alert('提示', '您确定要退出吗？', [
									{
										text: '确定',
										onPress: () => {
											AsyncStorage.clear()
											router.replace('/')
										},
									},
									{text: '取消'},
								])
							}
						>
							{/* 触摸后不透明度可以发生改变的组件 */}
							<Image style={{width: 30, height: 30, marginRight: zhSpacingRowBase}} source={require('../../assets/img/user1.png')} />
						</TouchableOpacity>
					),
				}}
			/>
			<Stack.Screen
				name="detailA"
				options={{
					title: '佩戴距离',
					headerLeft: () => (
						<Pressable onPress={goBack}>
							<Text>&lt;返回</Text>
						</Pressable>
					),
				}}
			/>
			<Stack.Screen
				name="detailB"
				options={{
					title: '佩戴时长',
					headerLeft: () => (
						<Pressable onPress={goBack}>
							<Text>&lt;返回</Text>
						</Pressable>
					),
				}}
			/>
			<Stack.Screen
				name="detailC"
				options={{
					title: '光照强度',
					headerLeft: () => (
						<Pressable onPress={goBack}>
							<Text>&lt;返回</Text>
						</Pressable>
					),
				}}
			/>
			<Stack.Screen
				name="detailD"
				options={{
					title: '疲劳程度',
					headerLeft: () => (
						<Pressable onPress={goBack}>
							<Text>&lt;返回</Text>
						</Pressable>
					),
				}}
			/>
		</Stack>
	)
}
